<!--
 * @copyright: Huang Ding
 * @Author: ding-cx
 * @Date: 2021-04-02 14:08:32
 * @LastEditors: ding-cx
 * @LastEditTime: 2021-04-02 17:59:39
 * @Description: 图标选择器组件
-->
<template>
  <div>
    <el-input :size="size" v-model="inputValue" placeholder="请输入图标名称">
      <template #append="">
        <el-button @click="openDialog" icon="el-icon-search"></el-button>
      </template>
    </el-input>
    <el-dialog
      title="选择图标"
      top="60px"
      :visible.sync="dialog.visible"
      width="60%"
      append-to-body
      :before-close="dialogBeforeClose"
    >
      <div>
        <icons @selected="iconSelected"></icons>
      </div>
      <div slot="footer">
        <el-button
          @click="dialog.visible = false"
          size="mini"
          icon="el-icon-circle-close"
          >关 闭</el-button
        >
        <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed } from "@vue/composition-api";
import Icons from "../icons";

function useEnter(setups) {
  const dialog = reactive({
    visible: false,
  });
  const openDialog = () => {
    dialog.visible = true;
  };
  const dialogBeforeClose = (done) => {
    done();
  };

  const inputValue = computed({
    get() {
      return setups.props.value;
    },
    set(text) {
      setups.ctx.emit("input", text);
    },
  });
  const iconSelected = (text) => {
      //   console.log(text);
    inputValue.value = text;
    dialog.visible = false;
  };
  return {
    dialog,
    openDialog,
    dialogBeforeClose,
    inputValue,
    iconSelected,
  };
}

export default {
  name: "base-icon-select",
  components: {
    Icons,
  },
  setup(props, ctx) {
    const setups = {
      props,
      ctx,
      root: ctx.root,
    };
    return useEnter(setups);
  },
  props: {
    size: {
      //   default: "",
      type: String,
    },
    value: {
      type: [String],
      required: true,
    },
  },
};
</script>

<style>
</style>
